<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video id="pullVideo" autoplay preload muted></video>
    <div id="pullBtn">拉流</div>
    <script>
        const pullBtn = document.getElementById('pullBtn');
        // 开始拉流
        const startPll = () => {
            const roomId = 'webrtc';
            const id = Math.random();
            const url = `ws://118.25.18.233/websocket/ws/chat/${roomId}?id=${id}`;
            let ws = new WebSocket(url); // 可换成局域网ip地址
            const pullVideo = document.getElementById('pullVideo');
            let pullStrem;
            // 拉流rtc connection
            const pullRtcCon = new RTCPeerConnection();
            const pullID = new Date().getTime() + 'io' + Math.round(Math.random() * 10000);
            // 拉流监听icecandidate
            pullRtcCon.onicecandidate = (event) => {
                // 接收到icecandidate  发送candidate给推流端
                if (event.candidate) ws.send(JSON.stringify({ type: 'candidate', candidate: event.candidate, num: 1, id: pullID }))
            }
            // 监听track
            pullRtcCon.addEventListener('track', (event) => {
                pullStrem = event.streams[0];
                pullVideo.srcObject = event.streams[0];
            })
            // 打开webscoket
            ws.addEventListener('open', async () => {
                await ws.send(JSON.stringify({ type: 'pull_init', id: pullID }));
                // 通知推流端，开始推流
                ws.send(JSON.stringify({ type: 'pull_start', id: pullID }));
                console.log('websocket连接成功')
            });
            // 监听webscoket消息
            ws.addEventListener('message', (event) => {
                let data = JSON.parse(event.data);
                // 接收到推流端offer
                console.log(data, '????')
                if (data.type == 'offer') {
                    // 设置拉流端 RemoteDescription
                    pullRtcCon.setRemoteDescription(data.offer).then(() => {
                        console.log('拉流设置RemoteDescription成功')
                        // 创建answer
                        pullRtcCon.createAnswer(data.offer).then((answer) => {
                            // 设置拉流的LocalDescription
                            pullRtcCon.setLocalDescription(answer).then(() => {
                                console.log('拉流设置LocalDescription成功')
                            });
                            // 发送answer到推流端
                            ws.send(JSON.stringify({ type: 'answer', answer, id: pullID }))
                        });
                    });
                }
                // 接收推流端candidate  拉流端添加IceCandidate
                if (data.type == 'candidate') pullRtcCon.addIceCandidate(data.candidate).then(() => { console.log('拉流添加candidate成功'); });
            })
        }
        // 拉流按钮点击事件
        pullBtn.addEventListener('click', startPll)
    </script>
</body>

</html>